<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Offset the vanishing point using padding</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="../../lib/mapbox-gl.js"></script>
    <link href="../../lib/mapbox-gl.css" rel="stylesheet" />
    <script src="../../lib/axios.min.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
      .rounded-rect {
        background: white;
        border-radius: 10px;
        box-shadow: 0 0 50px -25px black;
      }

      .flex-center {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .flex-center.left {
        left: 0px;
      }

      .flex-center.right {
        right: 0px;
      }

      .sidebar-content {
        position: absolute;
        width: 95%;
        height: 95%;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 32px;
        color: gray;
      }

      .sidebar-toggle {
        position: absolute;
        width: 1.3em;
        height: 1.3em;
        overflow: visible;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .sidebar-toggle.left {
        right: -1.5em;
      }

      .sidebar-toggle.right {
        left: -1.5em;
      }

      .sidebar-toggle:hover {
        color: #0aa1cf;
        cursor: pointer;
      }

      .sidebar {
        transition: transform 1s;
        z-index: 1;
        width: 300px;
        height: 100%;
      }

      /*
      The sidebar styling has them "expanded" by default, we use CSS transforms to push them offscreen
      The toggleSidebar() function removes this class from the element in order to expand it.
      */
      .left.collapsed {
        transform: translateX(-295px);
      }

      .right.collapsed {
        transform: translateX(295px);
      }
    </style>
  </head>
  <body>
    <div id="map">
      <div id="left" class="sidebar flex-center left collapsed">
        <div class="sidebar-content rounded-rect flex-center">
          Left Sidebar
          <div
            class="sidebar-toggle rounded-rect left"
            onclick="toggleSidebar('left')"
          >
            &rarr;
          </div>
        </div>
      </div>
      <div id="right" class="sidebar flex-center right collapsed">
        <div class="sidebar-content rounded-rect flex-center">
          Right Sidebar
          <div
            class="sidebar-toggle rounded-rect right"
            onclick="toggleSidebar('right')"
          >
            &larr;
          </div>
        </div>
      </div>
    </div>
    <script>
      let baseDataUrl = `http://${localStorage.getItem(
        "host"
      )}/mapbox-gl-js-offline-examples`;

      let toggleSidebar = undefined;

      axios
        .get(
          baseDataUrl +
            `/resources/styles/${localStorage.getItem(
              "mbtilesStylesName"
            )}.json`
        )
        .then((res) => {
          let data = res.data;
          initMap(data);
        })
        .catch((err) => {
          console.error(err);
        });
      let center = [103.463, 33.415];
      function initMap(style) {
        let map = new mapboxgl.Map({
          container: "map",
          center: center,
          zoom: 3,
          style: style,
        });

        new mapboxgl.Marker().setLngLat(center).addTo(map);
        toggleSidebar = function toggleSidebar(id) {
          var elem = document.getElementById(id);
          var classes = elem.className.split(" ");
          var collapsed = classes.indexOf("collapsed") !== -1;

          var padding = {};

          if (collapsed) {
            // Remove the 'collapsed' class from the class list of the element, this sets it back to the expanded state.
            classes.splice(classes.indexOf("collapsed"), 1);

            padding[id] = 300; // In px, matches the width of the sidebars set in .sidebar CSS class
            map.easeTo({
              padding: padding,
              duration: 1000, // In ms, CSS transition duration property for the sidebar matches this value
            });
          } else {
            padding[id] = 0;
            // Add the 'collapsed' class to the class list of the element
            classes.push("collapsed");

            map.easeTo({
              padding: padding,
              duration: 1000,
            });
          }

          // Update the class list on the element
          elem.className = classes.join(" ");
        }

        map.on("load", function () {
          toggleSidebar("left");
        });
      }
    </script>
  </body>
</html>
